/**
 * @description: 图表浅色主题
 * @file: light.ts
 * @author: Evan
 * @date: 2025.06.06 14:07:45
 * @week: 周五
 * @version: V
 */

import { convertNum, tooltipFormatter, createTabContent } from '../methods'

export default {
  color: ['#175EFF', '#5FD5EC', '#FFAC2F', '#0FADCF', '#FFCC41', '#6577F3'],
  textStyle: {},
  title: {
    textStyle: {
      color: '#86909c'
    },
    subtextStyle: {
      color: '#76818D'
    }
  },
  line: {
    itemStyle: {
      borderWidth: 2
    },
    lineStyle: {
      width: 3
    },
    symbolSize: '0',
    symbol: 'emptyCircle',
    smooth: true
  },
  radar: {
    itemStyle: {
      borderWidth: '4'
    },
    lineStyle: {
      width: 2
    },
    symbolSize: 0,
    symbol: 'circle',
    smooth: true,
    areaStyle: {
      color: 'rgba(23, 94, 255, 0.2)'
    }
  },
  bar: {
    barMaxWidth: 12,
    itemStyle: {
      barBorderWidth: 0,
      barBorderColor: '#ccc',
      borderRadius: [3, 3, 0, 0]
    }
  },
  pie: {
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: true
      }
    }
  },
  scatter: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  boxplot: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  parallel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  sankey: {
    right: '10%',
    draggable: false,
    nodeWidth: 33,
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    },
    lineStyle: {
      color: 'gradient',
      curveness: 0.5
    },
    label: {
      color: '#1d2129',
      position: 'insideLeft'
    }
  },
  funnel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  gauge: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    }
  },
  candlestick: {
    itemStyle: {
      color: '#fc97af',
      color0: 'transparent',
      borderColor: '#fc97af',
      borderColor0: '#87f7cf',
      borderWidth: '2'
    }
  },
  graph: {
    itemStyle: {
      borderWidth: 0,
      borderColor: '#ccc'
    },
    lineStyle: {
      width: '1',
      color: '#ffffff'
    },
    symbolSize: '0',
    symbol: 'circle',
    smooth: true,
    color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
    label: {
      color: '#293441'
    }
  },
  map: {
    itemStyle: {
      areaColor: '#f3f3f3',
      borderColor: '#999999',
      borderWidth: 0.5
    },
    label: {
      color: '#893448'
    },
    emphasis: {
      itemStyle: {
        areaColor: 'rgba(255,178,72,1)',
        borderColor: '#eb8146',
        borderWidth: 1
      },
      label: {
        color: 'rgb(137,52,72)'
      }
    }
  },
  geo: {
    itemStyle: {
      areaColor: '#f3f3f3',
      borderColor: '#999999',
      borderWidth: 0.5
    },
    label: {
      color: '#893448'
    },
    emphasis: {
      itemStyle: {
        areaColor: 'rgba(255,178,72,1)',
        borderColor: '#eb8146',
        borderWidth: 1
      },
      label: {
        color: 'rgb(137,52,72)'
      }
    }
  },
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E6EB',
        type: 'dashed'
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#E5E6EB'
      }
    },
    axisLabel: {
      show: true,
      fontSize: 14,
      color: '#86909C'
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#E5E6EB']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
      }
    }
  },
  valueAxis: {
    axisLine: {
      show: !true,
      lineStyle: {
        color: '#E5E6EB'
      }
    },
    nameTextStyle: {
      color: '#C9CDD4',
      fontSize: 10,
      padding: [0, 0, 0, -38]
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      show: true,
      color: '#86909C',
      fontSize: 14,
      formatter: (num: number) => convertNum(num)
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#E5E6EB'],
        type: 'dashed'
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
      }
    }
  },
  logAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#666666'
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      show: true,
      color: '#C9CDD4',
      fontSize: 14
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#e6e6e6']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
      }
    }
  },
  timeAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#666666'
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      show: true,
      color: '#aaaaaa'
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#e6e6e6']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
      }
    }
  },
  toolbox: {
    show: true,
    feature: {
      dataView: {
        show: true,
        readOnly: false,
        title: '数据视图',
        lang: ['数据视图', '关闭', '导出Excel'],
        // icon: iconList.dataView,
        optionToContent: (opt: AnyObject) => createTabContent(opt)
      },
      magicType: {
        show: true,
        type: ['line', 'bar'],
        title: {
          bar: '柱形图',
          line: '折线图'
        }
        // icon: {
        //   line: iconList.line,
        //   bar: iconList.bar
        // }
      },
      restore: {
        show: true,
        title: '还原'
        // icon: iconList.restore
      },
      saveAsImage: {
        show: true,
        title: '保存为图片'
        // icon: iconList.saveAsImage
      }
    },
    iconStyle: {
      borderColor: '#999999',
      fill: '#ccc', // No fill
      stroke: '#333', // Outline color
      lineWidth: 2 // Stroke width
    },
    emphasis: {
      iconStyle: {
        color: '#175EFF'
      }
    }
  },
  legend: {
    top: 10,
    width: '90%',
    orient: 'horizontal',
    itemGap: 20,
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      color: '#8F9FCA',
      fontSize: 12
    }
  },
  grid: {
    left: 75,
    right: 20,
    bottom: 40,
    top: 40
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    padding: 10,
    formatter: (params: AnyObject) => tooltipFormatter(params),
    backgroundColor: 'rgba(78,89,105,0.85)',
    borderRadius: 4,
    // 如需要边框颜色对应列表项颜色 设置  void 0 即可
    borderColor: 'transparent',
    axisPointer: {
      type: 'cross',
      lineStyle: {
        color: '#175EFF',
        width: 1
      },
      crossStyle: {
        color: '#175EFF',
        width: 1
      },
      label: {
        fontSize: 14,
        padding: [8, 8, 4, 8],
        backgroundColor: '#0989FF'
      }
    }
  },
  timeline: {
    lineStyle: {
      color: '#87f7cf',
      width: 1
    },
    itemStyle: {
      color: '#87f7cf',
      borderWidth: 1
    },
    controlStyle: {
      color: '#87f7cf',
      borderColor: '#87f7cf',
      borderWidth: 0.5
    },
    checkpointStyle: {
      color: '#fc97af',
      borderColor: '#fc97af'
    },
    label: {
      color: '#87f7cf'
    },
    emphasis: {
      itemStyle: {
        color: '#f7f494'
      },
      controlStyle: {
        color: '#87f7cf',
        borderColor: '#87f7cf',
        borderWidth: 0.5
      },
      label: {
        color: '#87f7cf'
      }
    }
  },
  visualMap: {
    color: ['#fc97af', '#87f7cf']
  },
  dataZoom: {
    backgroundColor: 'rgba(255,255,255,0)',
    dataBackgroundColor: 'rgba(114,204,255,1)',
    fillerColor: 'rgba(114,204,255,0.2)',
    handleColor: '#72ccff',
    handleSize: '100%',
    textStyle: {
      color: '#333333'
    }
  },
  markPoint: {
    label: {
      color: '#ffffff',
      fontSize: 12,
      // formatter: '{b}\n {@score}',
      formatter: (e: AnyObject) => {
        const num = convertNum(e.value)
        return `${e.name}\n${num}`
      }
    },
    symbol: 'pin',
    symbolSize: 52,
    emphasis: {
      label: {
        color: '#ffffff'
      }
    }
  },
  markLine: {
    symbol: 'none',
    label: {
      color: 'inherit',
      fontSize: 12,
      // formatter: '{b}: {@score}',
      formatter: (e: AnyObject) => {
        const num = convertNum(e.value)
        return `${e.name}: ${num}`
      },
      position: 'insideEndBottom'
    },
    emphasis: {
      disabled: true,
      label: {
        color: '#ffffff'
      }
    }
  }
}
